<template>
  <div id="JobChance">
    <div class="banner container-fuild text-center">产品详情</div>
    <div class="container">
      <!-- <van-empty v-if="order.length == 0" description="暂无数据" /> -->
      <el-divider></el-divider>
      <div style="height"></div>

      <!-- <el-table border="true"  style="width: 100%">
            <el-table-column label="名称" width="180">
              <template slot-scope="">
                <span style="">{{info.pname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="编号" width="180">
              <template slot-scope="">
                <span>{{ info.fnums }}</span>
              </template>
            </el-table-column>
            
          </el-table> -->
      <table border="1"  cellpadding="10" >
        <tr >
          <th class="pd">
            名称

          </th>
          <th class="pd">编号</th>
          <th class="pd">规格</th>
          <th class="pd">品牌</th>
          <th class="pd">简介</th>
        </tr>
        <tr >
          <td class="pd" style="width: 200px;">{{info.pname}}</td>
          <td class="pd" style="width: 200px;">{{info.fnums}}</td>
           <td class="pd" style="width: 200px;">{{info.yisun}}</td>
            <td class="pd" style="width: 200px;">{{info.isxuan}}</td>
            <td class="pd">{{info.pinfo}}</td>
        </tr>


      </table>
      <van-button type="info" style="width:10vw" class="mt" size="large" @click.stop="shou">收藏</van-button>

      <!-- <van-card
          v-if="info"
          class="cus"
          :title="'名称: '+ info.pname"
          @click="go_xun"
        >
         <template #tags>
    <van-tag plain type="danger" class="mt">编号: {{info.fnums?info.fnums:'暂无'}}</van-tag>
    <div class="mt">规格:{{info.yisun?info.yisun:'暂无'}}</div>
    <div class="mt">品牌:{{info.isxuan?info.isxuan:'暂无'}}</div>
   
    <van-button type="info" class="mt" size="mini" @click.stop="shou">收藏</van-button>
  </template>

        </van-card> -->
      <div class="mt">产品资料:</div>
      <div v-if="limg_arr.length">
        <img
          v-for="(i, m) in limg_arr"
          :key="m"
          :src="$base + i"
          class="img mt2"
        />
      </div>
      <div v-if="cimg_arr.length">
        <img
          v-for="(i, j) in cimg_arr"
          :key="j"
          :src="$base + i"
          class="img mt2"
        />
      </div>
      <!-- <div v-if="zimg_arr.length">
        <img
          v-for="(i, j) in zimg_arr"
          :key="j"
          :src="$base + i"
          class="img mt2"
        />
      </div> -->

      <video width="320" height="240" controls class="mt" v-if="info.video">
        <source :src="$base + info.video" type="video/mp4" />
      </video>

      <!-- </div> -->
      <el-divider></el-divider>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import { Empty, Card } from "vant";
export default {
  name: "Productxq",
  data() {
    return {
      user: "",
      order: [],
      info: "",
      time: [],
      limg_arr: [],
      cimg_arr: [],
      zimg_arr: [],
    };
  },
  mounted() {
    let lg = localStorage.getItem("lg");

    let info = this.$route.query.info;
    this.info = info;
    console.log("产品详情:", info);
    if (info.limg) {
      this.limg_arr = info.limg.split(",");
    }
    if (info.cimg) {
      this.cimg_arr = info.cimg.split(",");
    }
    if (info.zimg) {
      this.zimg_arr = info.zimg.split(",");
    }

    console.log("22:", this.limg_arr, this.cimg_arr);

    var wow = new WOW();
    wow.init();
    let user = JSON.parse(localStorage.getItem("user"));
    this.user = user;
    // this.get_order();
  },
  methods: {
    shou() {
      let data = {
        fen: 1,
        lid: this.info.fid,
        pname: this.info.pname,
        uid: this.user[0].id,
      };
      console.log("11:", data);
      this.http.post("/products/savemsg", data).then((res) => {
        console.log("收藏:", res);
       
      });
    },
    go_xun() {
      this.$router.push("/contactus");
    },
    timeTrans(date) {
      var date = new Date(date * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
};
</script>
<style scoped>
.table-css{
    margin-top: 5px;
    font-family: "Calibri";
    font-weight:bold;
}
.img {
  width: 100%;
  height: 100%;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.JobChance-container {
  margin: 100px;
  padding: 30px;
  transition: all ease 0.5s;
  border: 1px dashed salmon;
}
.JobChance-container h2 {
  color: rgb(255, 102, 19);
  font-weight: bolder;
  text-align: center;
}
.JobChance-container p {
  font-size: 20px;
  color: rgb(255, 102, 19);
  font-weight: 700;
}
.JobChance-container ol {
  list-style-type: decimal;
  padding-left: 30px;
}
.JobChance-container ol > li {
  font-size: 14px;
  line-height: 2.7rem;
}
@media screen and (max-width: 997px) {
  .JobChance-container {
    margin: 20px 0;
    padding: 20px;
    border: 1px dashed salmon;
  }
}
</style>

